<template>
  <transition name="fade">
    <div class="menuShow" v-show='isSelfShow'>
      <div class='postion'>
      	<div class="item" v-for='item in menuList'>
          <router-link :to="item.link">
    			   <div class="icon"><i class='iconfont' :class='item.icon'></i></div>
    			   <p>{{item.title}}</p>
          </router-link>
      	</div>
      	
      	<div class="close" @click='closeSelf'>
      		<i class='iconfont icon-x'></i>
      	</div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
  	data(){
  		return {
  			isSelfShow:false,
        menuList:[
          {title:'餐厅简介',link:'/hotel',icon:'icon-wangshangshangdian'},
          {title:'餐厅活动',link:'/',icon:'icon-youhuiquan1'},
          {title:'餐厅特权',link:'/',icon:'icon-huangguan'},
          {title:'菜单',link:'/',icon:'icon-dingdan5'},
          {title:'已下订单',link:'/',icon:'icon-shuben'},
          {title:'历史订单',link:'/',icon:'icon-lishi'},
          {title:'购物车',link:'/',icon:'icon-cart2'},
          {title:'搜索',link:'/',icon:'icon-sousuo1'},
          {title:'继续点菜',link:'/',icon:'icon-xukong'},
        ]
  		}
  	},
    props:['isShow'],
  	methods:{
  		closeSelf(){
  			this.isSelfShow = false;
  		}
  	},
    watch:{
      isShow(val){
        this.isSelfShow = this.isShow;
      },
      isSelfShow(val){
          this.$emit("isShowChange",val);//③组件内对myResult变更后向外部发送事件通知
      }
    }
  };
</script>

<style lang='less'>
	.menuShow{
		background: rgba(51,51,51,0.7);
		position: fixed;
		z-index: 999;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		color: #fff;
    .postion{position: absolute;bottom: 2rem;}
		.item{height: 2rem;color: #Fff;line-height: 1.92rem;float: left;width: 2rem;margin:0 0.2rem 1.5rem 1rem;
			.icon{background: #fff;border-radius: 50%;width:1.92rem;height: 1.92rem;text-align: center;
        .iconfont{font-size: 1.3rem;color: #484848}
      }
      a{color: #fff;}
			p{padding: 0;margin: 0;line-height:0.96rem;text-align: center;}
		}
		.close{clear: both;padding-top: 0.3rem;text-align: center;font-size: 0.506667rem;
			.iconfont{font-size: 0.5rem;}
		}
	}
</style>